<style lang="less">
    @import './picture-selector.less';
</style>

<template>
    <Modal v-model="vshow"  width="800px" @on-visible-change="onHide">
		<Spin fix v-if="spinShow">
			<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			<div>Loading</div>
		</Spin>
			<div slot="header">
				<span class="group-header">选择图片</span>
				<RadioGroup  v-model="tagsIndex" @on-change="onTagsChange">
					<Radio :label="0" >
						<span>全部图片 ({{imageTotal}})</span>
					</Radio>
					<Radio  v-for="(item,index) in tags" :key="index" :label="index+1" >
						<span>{{item.name}} ({{item.memo}})</span>
					</Radio>
				</RadioGroup>
				
			</div>
        <Row v-show="!spinShow" type="flex" :gutter="16">
			<Col :span="4" v-for="(item,index) in imageList.data" :key="index">
				<div class="image-box" @click="insertImage(index)">
					<img :src="item.thumbnail" />
					<p>{{item.title}}</p>
				</div>
			</Col>
        </Row>
		<div class="cleaner10"></div>
		<Page v-show="!spinShow"  @on-change="changePage" :total="imageList.total" :page-size="imageList.pageSize" :current.sync="imageList.page" :transfer="true" show-elevator ></Page>
	
    </Modal>
</template>

<script>
import { Row, Col, Modal, Spin, Page } from 'iview';

import {mapState,mapGetters} from 'vuex'
export default {
    name: 'PictureSelector',
    components: {
        Row, Col, Modal, Spin, Page
    },
    props: {
        show: {
            type: Boolean
        }
    },
    data(){
        return {
			tags:[{id:0}],
			tagsIndex:0,
			imageTotal:0,
            spinShow:true,
			imageList:{page:0,pageSize:18}
        }
    },
	methods:{
        init:function(){
            let self=this
            self.spinShow=true

            function action1(){return self.$http.get("/v1/pictures/groups",{params: { 'token': self.token }})}
			function action2(){return self.$http.get("/v1/pictures",{params: { 'token': self.token, page:self.imageList.page, pageSize: self.imageList.pageSize}})}
			
			self.$http.all([action1(),action2()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code)
				{
					self.imageTotal=response1.data.total
					self.tags=response1.data.data

				}else{self.$Message.error(response1.data.message)}

				if(200==response2.data.status && 0==response2.data.code)
				{
					self.imageList=response2.data

				}else{self.$Message.error(response2.data.message)}

				self.spinShow=false


			})).catch(self.$http.spread(function (error1,error2) { 
				self.$Message.error(error1)
				self.spinShow=false
			}))


			
        },
		changePage:function(){
			let self=this
            self.spinShow=true
			self.$http.get("/v1/pictures",{params: { 'token': self.token, page:self.imageList.page, pageSize: self.imageList.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.imageList=response.data

				}
                self.spinShow=false
			}).catch(function(error){
				this.$Notice.info({title: error,desc:''});
                self.spinShow=false
			})
		},
		onTagsChange:function(val){
			let self=this
			self.spinShow=true
			let _id = 0
			if(0<val){ _id = self.tags[val-1].id}
			function action1(){return self.$http.get("/v1/pictures",{params: { 'token': self.token, page:1, pageSize: self.imageList.pageSize
			,search:{type_id:_id} }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code )
				{
					self.imageList=response1.data

				}else{self.$Message.error(response1.data.message)}

				self.spinShow=false

			})).catch(self.$http.spread(function (error1) { 
				self.$Message.error(error1)
				self.spinShow=false
			}))
		},
        onHide:function(val){
            if (!val){
                this.$emit("on-hide",false)
            }
        },
        insertImage:function(index){
            this.$emit("on-change",this.imageList.data[index].url)
		},
		changePage:function(){
			let self=this
			self.spinShow=true
			self.$http.get("/v1/pictures",{params: { 'token': self.token, page:self.imageList.page, pageSize: self.imageList.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.imageList=response.data

				}
				self.spinShow=false
			}).catch(function(error){
				this.$Notice.info({title: error,desc:''});
				self.spinShow=false
			})
		},
    },
    mounted(){
        this.init()
    },
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuIndex']),
		vshow:{
            get () {
                return this.show
            },
            set (val) {
                // this.show=val
            }
		}
	}
};
</script>

